<template>
  <div class="js-operational-location-chart" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/map/js/china.js');
  // require('script-loader!@/vendor/china.js')
  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utils'
  const animationDuration = 1000

  export default {
    name: 'location-chart',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      // xData: Array,
      yData: Array,
      // tooltipData: Array,
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      yData() {
        this.renderChart();
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHanlder)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.renderChart()
      },
      renderChart(){

        let option = {
          title : {
            text: '',
            subtext: ''
          },
          tooltip : {
            trigger: 'item'
          },
          legend: {
            x:'right',
            selectedMode:false,
            data:['北京','上海','广东']
          },
          dataRange: {
            orient: 'horizontal',
            min: 0,
            max: 55000,
            text:['高','低'],           // 文本，默认为数值文本
            splitNumber:0
          },
          toolbox: {
            show : true,
            orient: 'vertical',
            x:'right',
            y:'center',
            feature : {
              mark : {show: true},
              dataView : {show: false, readOnly: false}
            }
          },
          series : [
            {
              name: '流量统计',
              type: 'map',
              mapType: 'china',
              mapLocation: {
                x: 'left'
              },
              selectedMode : 'multiple',
              itemStyle:{
                normal:{label:{show:false}},
                emphasis:{label:{show:true}}
              },
              data: this.yData
            },
            {
              name:'2011全国GDP对比',
              type:'pie',
              roseType : 'area',
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              center: [document.getElementsByClassName('.js-operational-location-chart').offsetWidth - 250, 225],
              radius: [30, 120],
              data:[
                {name: '北京', value: 16251.93},
                {name: '上海', value: 19195.69},
                {name: '广东', value: 53210.28}
              ]
            }
          ],
          animation: false
        };

        this.chart.on('mapSelected', function (param){
          var selected = param.selected;
          var mapSeries = option.series[0];
          var data = [];
          var legendData = [];
          var name;
          for (var p = 0, len = mapSeries.data.length; p < len; p++) {
            name = mapSeries.data[p].name;
            //mapSeries.data[p].selected = selected[name];
            if (selected[name]) {
              data.push({
                name: name,
                value: mapSeries.data[p].value
              });
              legendData.push(name);
            }
          }
          option.legend.data = legendData;
          option.series[1].data = data;
          this.chart.setOption(option, true);
        });
        this.chart.setOption(option);
      }
    }
  }
</script>
